import {
  BrowserRouter as Router,
  Route,
  Link,
  NavLink,
} from 'react-router-dom';
// import { HashRouter as Router, Route, Link } from 'react-router-dom';

import './App.css';

const Home = () => <div>Home</div>;
const Login = () => <div>Login</div>;
const Search = () => <div>Search</div>;
const Welcome = () => <div>Welcome</div>;
const First = () => <div>First</div>;
const FirstA = () => <div>FirstA</div>;
function App() {
  return (
    <Router>
      {/* 组件起点 */}
      <Link to={'/first/a'}>点我</Link>

      <Link to={'/home'}>Home</Link>
      <br />
      <NavLink to={'/login'} activeClassName={'login-active'}>
        Login
      </NavLink>
      <br />
      <Link to={'/search'}>Search</Link>
      {/* 网站欢迎页面，默认显示页面 */}
      <Route exact path={'/'} component={Welcome} />
      <Route exact path={'/first'} component={First} />
      <Route exact path={'/first/a'} component={FirstA} />

      {/* 终点 */}
      <Route path={'/home'} component={Home} />
      <Route path={'/home'} component={Search} />
      {/* 登录组件 */}
      <Route path={'/login'} component={Login} />
      {/* 搜索组件 */}
      <Route path={'/search'}>
        <Search />
      </Route>
    </Router>
  );
}

export default App;
